<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>搜尋課程</title>
	<link rel="stylesheet" href="../css/global.css" type="text/css">
	<style type="text/css">
		select {
			padding: 3px;
			margin: 0;
			-webkit-border-radius: 4px;
			-moz-border-radius: 4px;
			border-radius: 4px;
			-webkit-box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
			-moz-box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
			box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
			background: #f8f8f8;
			border: none;
			outline: none;
			display: inline-block;
			-webkit-appearance: none;
			-moz-appearance: none;
			appearance: none;
			cursor: pointer;
		}
		
		@media screen and (-webkit-min-device-pixel-ratio:0) {
			select {
				padding-right: 18px
			}
		}
		
		label {
			position: relative
		}
		
		label:after {
			content: '<>';
			font: 11px "Consolas", monospace;
			color: #aaa;
			-webkit-transform: rotate(90deg);
			-moz-transform: rotate(90deg);
			-ms-transform: rotate(90deg);
			transform: rotate(90deg);
			right: 8px;
			top: 2px;
			padding: 0 0 2px;
			border-bottom: 1px solid #ddd;
			position: absolute;
			pointer-events: none;
		}

		label:before {
			content: '';
			right: 6px;
			top: 0px;
			width: 20px;
			height: 20px;
			background: #f8f8f8;
			position: absolute;
			pointer-events: none;
			display: block;
		}

		#searchCourse {
			width: 100%;
			text-align: center;
		}
	</style>
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
	<script type="text/javascript" src="./js/validate/jquery.validate.min.js"></script>
	<script type="text/javascript" src="./js/validate/myValidateMethod.js"></script>
	<script type="text/javascript" src="./js/form/jquery.form.min.js"></script>
	<script type="text/javascript" src="../js/global.js"></script>
	<script type="text/javascript" src="../js/activeMenuButton.js"></script>
</head>
<body>
	<jsp:include page="../header.jsp"></jsp:include>
	<div id="contents">
		<jsp:include page="../member/login.jsp"></jsp:include>
		<div id="searchCourseContent" class="rightContent">
			<form id="searchCourse" class="form-container">
				<div class="form-title"><h2>搜尋課程</h2></div>
				<label>
					<select>
						<option selected>課程名稱</option>
						<option>授課教師</option>
						<option>學校名稱</option>
					</select>
				</label>​
				<input class="form-field" type="text" name="firstname" />
				<input class="button rounded cyan" type="submit" value="搜尋" />
			</form>
		</div>
	</div>
	<jsp:include page="../footer.jsp"></jsp:include>
</body>
</html>